<template>
	<image :class="['icon-arrow',direction]" src="/static/image/mine/arrow-right.png"></image>
</template>

<script setup lang="ts" name="Arrow">
	import { defineProps, withDefaults, computed } from 'vue';
	const props = withDefaults(defineProps<{ direction ?: 'left' | 'right' }>(), {
		direction: 'right'
	});
	const direction = computed(() => {
		return `icon-arrow--${props.direction}`
	});
</script>

<style lang="scss">
	.icon-arrow {
		display: inline-flex;
		flex-shrink: 0;
		width: 29rpx;
		height: 29rpx;

		&--left {
			transform: rotate(-90deg);
		}

		&--right {}
	}
</style>